import React, { Component } from 'react'
import Banner from 'containers/banner'
import Tabs from 'containers/tabs'
import classnames from 'classnames'
import Styles from './index.less'
function Pannel(props){
  return (
    <div className={Styles.pannelContainer}>
      <h1>{props.title}</h1>
      <div className={Styles.pannelContent}>
        {props.children}
      </div>
    </div>
  )
}
class DisplayTabs extends Component {
  constructor(props) {
    super(props)
    this.menuList = React.Children.map(props.children, v => v.props.tab)
    this.state = {
      currentIndex: 0
    }
    this.menuClick = this.menuClick.bind(this)
  }
  static TabBox(props) {
    return (
      props.children
    )
  }
  menuClick(index) {
    const { currentIndex } = this.state
    return () => {
      if (currentIndex !== index) {
        this.setState({
          currentIndex: index
        })
      }
    }
  }
  render() {
    const { currentIndex } = this.state
    const { children } = this.props
    return (
      <div className={Styles.displayTabs}>
        <ul className={Styles.menuList}>
          {
            this.menuList.map((v, i) => (
              <li key={v} onClick={this.menuClick(i)} className={classnames({
                [Styles.active]: currentIndex === i
              })}>
                <span>{v}</span>
              </li>
            ))
          }
        </ul>
        <div className={Styles.displayContent}>
          <h2>{this.menuList[currentIndex]}</h2>
          <div>
            { React.Children.toArray(children).find((v, i) => i === currentIndex) }
          </div>
        </div>  
      </div>
    )
  }
}

export default class Manufacture extends Component {
    render() {
      const TabPane = Tabs.TabPane
      const TabBox = DisplayTabs.TabBox
      return (
        <div className={Styles.manufacture}>
          <Banner backgroundImg="https://img.alicdn.com/tfs/TB1.zrXJwmTBuNjy1XbXXaMrVXa-1440-550.png">
            <h1>智能制造解决方案</h1>
            <p>阿里云IoT智能制造平台赋能生态，通过“五化一体”解决方案即自动化、信息化、数字化、网络化及智能化，助力工业企业特别是中小企业实现转型升级。</p>
          </Banner>
          <Tabs>
            <TabPane tab="概述">
              <Pannel title="关于智能制造解决方案">
                {/* <div className={Styles.textContainer}> */}
                  <p>
                  阿里云IoT智能制造平台结合第三方合作伙伴提供多行业多场景的整体解决方案，主要包含边缘计算平台和工业云平台两大能力主体。边缘计算平台主要实现复杂多样的工业现场设备的快速接入，数据优化，实时控制，数据安全以及消除信息孤岛等问题。工业云平台经过大数据运算生成模型，以实现生产过程中的预测性维护、良品率提升和能源节省等智能应用场景，并下发模型至边缘计算平台指导现场生产。
                  </p>
                {/* </div> */}
              </Pannel>
            </TabPane>
            <TabPane tab="能力与服务">
              <Pannel title="能力与服务">
                <DisplayTabs>
                  <TabBox tab="智能单品">
                    <p>工业产品连上阿里云IoT智能制造平台后形成智能产品，提升产品竞争力，产生增值服务（预测性维护，租赁管控等应用）；</p>
                    <p>车联网、电梯联网、共享单车联网、设备/装备联网、发动机引擎联网等。</p>
                  </TabBox>
                  <TabBox tab="智能工业">
                    <p>工业产品连上阿里云IoT智能制造平台后形成智能产品，提升产品竞争力，产生增值服务（预测性维护，租赁管控等应用）；车联网、电梯联网、共享单车联网、设备/装备联网、发动机引擎联网等。</p>
                  </TabBox>
                  <TabBox tab="智能制造">
                    <p>工业产品连上阿里云IoT智能制造平台后形成智能产品，提升产品竞争力，产生增值服务（预测性维护，租赁管控等应用）；车联网、电梯联网、共享单车联网、设备/装备联网、发动机引擎联网等。</p>
                  </TabBox>
                </DisplayTabs>
              </Pannel>
            </TabPane>
            <TabPane tab="客户案例">
              <Pannel title="客户案例">customer case</Pannel>
            </TabPane>
          </Tabs>
        </div>
      )
    }
  }